<template>
    <!-- 水质检测 -->
    <div class="water_quality_test">
        <CommonTitleComponent text="水质检测"></CommonTitleComponent>
        <div class="time-select-item">
            <div class="formDatePicker">
                <el-date-picker
                    v-model="value1"
                    style="width: 100%"
                    class="selectClass"
                    type="date"
                    :clearable="false"
                    :teleported="false"
                    placeholder="请选择日期"
                />
                <span></span>
            </div>
        </div>
        <div class="water_quality_data_list">
            <div v-for="(item, index) in state.typeList" :key="index">
                <CommonTitleComponentTitleCategory :text="item.name"></CommonTitleComponentTitleCategory>
                <div class="type_attribute">
                    <div class="header_title">{{ item.name }}（mg/L）</div>
                    <div class="content_attr">
                        <div v-for="(i, d) in item.list" :key="d">
                            <span>{{ i.type }}</span>
                            <span>{{ i.num }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { EchartsMethods } from '@/chart/index';
const value1 = ref('');
const state = reactive({
    typeList: [
        {
            name: '地下水',
            list: [
                {
                    type: 'PH',
                    num: '7.13'
                },
                {
                    type: '总硬度',
                    num: '245'
                },
                {
                    type: '耗氧量',
                    num: '0.83'
                },
                {
                    type: '硫化物',
                    num: '0.05'
                },
                {
                    type: '挥发酚',
                    num: '0'
                },
                {
                    type: '氨氮',
                    num: '0.39'
                },
                {
                    type: '硝酸盐',
                    num: '7.93'
                },
                {
                    type: '亚硝酸盐',
                    num: '0.05'
                }
            ]
        },
        {
            name: '地下水',
            list: [
                {
                    type: 'PH',
                    num: '7.13'
                },
                {
                    type: '总硬度',
                    num: '245'
                },
                {
                    type: '耗氧量',
                    num: '0.83'
                },
                {
                    type: '硫化物',
                    num: '0.05'
                },
                {
                    type: '挥发酚',
                    num: '0'
                },
                {
                    type: '氨氮',
                    num: '0.39'
                },
                {
                    type: '硝酸盐',
                    num: '7.93'
                },
                {
                    type: '亚硝酸盐',
                    num: '0.05'
                }
            ]
        }
    ]
});
</script>
<style lang="scss" scoped>
.water_quality_test {
    height: 100%;
    padding-top: 15px;
    position: relative;
    .time-select-item {
        width: 140px;
        position: absolute;
        top: 10px;
        right: 10px;
        ::v-deep(.el-date-editor).el-input {
            width: 100%;
        }
        ::v-deep(.el-input__prefix) .el-icon {
            width: 0;
        }
        ::v-deep(.el-input__wrapper) {
            background-color: transparent;
            box-shadow: none;
        }
        ::v-deep(.el-input__inner) {
            color: #b7bdbf;
        }
        > div {
            position: relative;
            width: 100%;
            > span {
                display: inline-block;
                width: 13px;
                height: 8px;
                background: url('@/assets/image/dropdownicon.png') no-repeat;
                background-size: 100% 100%;
                position: absolute;
                right: 10px;
                top: 12px;
            }
        }
    }

    .water_quality_data_list {
        height: 96%;

        > div {
            margin-top: 10px;
            .type_attribute {
                margin-top: 20px;

                .header_title {
                    background: rgba(0, 102, 255, 0.4);
                    padding: 5px 0;
                    width: 100%;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 500;
                    color: #ffffff;
                    margin-bottom: 4px;
                }

                .content_attr {
                    display: flex;
                    flex-wrap: wrap;

                    > div {
                        margin-right: 4px;
                        width: calc(25% - 3px);
                        text-align: center;
                        margin-bottom: 2px;

                        span {
                            display: inline-block;
                            width: 100%;
                            font-size: 12px;
                            font-weight: 500;
                            letter-spacing: 2px;
                            padding: 8px 0;
                            &:nth-of-type(1) {
                                color: #ffffff;
                                background: rgba(27, 147, 251, 0.5);
                            }

                            &:nth-of-type(2) {
                                color: #0e96ff;
                                background: rgba(89, 142, 255, 0.15);
                            }
                        }

                        &:nth-of-type(4n) {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
    }
}
</style>
